<script setup lang="ts" name="CkWrap">
import { storeToRefs } from 'pinia'
import { useLayoutStore } from '@/store/bigScreen/layoutStore'

const layoutStore = useLayoutStore()

const { layout } = storeToRefs(layoutStore)
</script>

<template>
  <div class="dnd-container wrap">
    <template v-if="layout.left.length > 0">
      <template v-for="item,index in layout.left" :key="index">
        <template v-if="item.component && item.visible">
          <component :is="item.component" :info="item" :index="index"></component>
        </template>
      </template>
    </template>
    <slot />
    <template v-if="layout.right.length > 0">
      <template v-for="item,index in layout.right" :key="index">
        <template v-if="item.component && item.visible">
          <component :is="item.component" :info="item" :index="index"></component>
        </template>
      </template>
    </template>
  </div>
</template>

<style scoped lang="scss">
.dnd-container{
  position: relative;
  display: flex;
  flex: 1;
}
</style>
